<template>
	<view class="icongroup" :style="'padding:' + mydata.padding.top + 'rpx ' + mydata.padding.lr + 'rpx ' + mydata.padding.bottom + 'rpx '">
		<view
			class="bg"
			:style="
				'background:' +
					mydata.bgcolor +
					';border-radius:' +
					mydata.radius.top +
					'rpx ' +
					mydata.radius.top +
					'rpx ' +
					mydata.radius.bottom +
					'rpx ' +
					mydata.radius.bottom +
					'rpx '
			"
		>
			<vcustomer :linkdata="item.linkdata" :style="'width:' + 100 / mydata.num + '%;'" v-for="(item, i) in mydata.list">
				<view  class="icon-item">					
						<view class="icon-box"><text class="custom-icon iconfont" v-bind:class="item.icon" :style="'color:' + mydata.iconcolor"></text></view>
						<text class="title" :style="'color:' + mydata.textcolor">{{ item.text }}</text>				
				</view>
				
			</vcustomer>
		</view>
	</view>
</template>

<script>
import util from '@/common/util.js';

export default {
	data() {
		return {};
	},
	props: {
		mydata: {
			type: Object,
			default: {}
		}
	},
	methods: {}
};
</script>

<style lang="scss" scoped>
.icongroup {
	.bg {
		display: flex;
		flex-wrap: wrap;
		overflow: hidden;
		.icon-item {
			width: 100%;
			display: flex;
			flex-direction: column;
			height: 170rpx;
			align-items: center;
			.icon-box {
				margin: 0 auto;
				display: flex;
				flex-direction: column;
				position: relative;
				padding: 32rpx 0 16rpx;
				.custom-icon {
					font-size: 56rpx;
					height: 56rpx;
					line-height: 56rpx;
					display: flex;
					flex-direction: column;
				}
			}
			.title {
				text-align: center;
				margin: 0 auto;
				font-size: 24rpx;
				line-height: 34rpx;
			}
		}
	}
}
</style>
